<template>
    <div class="product">
        <div class="left">
            <Menu active-name="1">
                    <MenuItem name="1">
                        <Icon type="document-text"></Icon>
                        文章管理
                    </MenuItem>
            </Menu>
        </div>
        <div class="right">
            <div class="right_top">
                <router-link to="/admin_index/add">
                    <Button type="primary">添加</Button>
                </router-link>
            </div>
            <div class="right_banner">
                    <table border="1">
                        <tr>
                            <th>{{this.$t('admin.cid')}}</th>
                            <th>{{this.$t('admin.create_time')}}</th>
                            <th>{{this.$t('admin.d3id')}}</th>
                            <th>{{this.$t('admin.description')}}</th>

                            <th>{{this.$t('admin.name')}}</th>
                            <th>{{this.$t('admin.pid')}}</th>
                            <th>{{this.$t('admin.price')}}</th>
                            <th>{{this.$t('admin.tags')}}</th>
                            <th>{{this.$t('admin.thumbnail')}}</th>
                            <th>{{this.$t('admin.url')}}</th>
                            <th>{{this.$t('admin.visible')}}</th>
                            <th>操作</th>
                        </tr>
                        <template v-for="item in  product">
                        <tr>
                            <td>{{item.cid || "Null"}}</td>
                            <td>
                                {{item.create_time || "Null"}}
                            </td>
                            <td>{{item.d3id || "Null"}}</td>
                            <td>{{item.description || "Null"}}</td>

                            <td>{{item.name || "Null"}}</td>
                            <td>{{item.pid || "Null"}}</td>
                            <td>{{item.price || "Null"}}</td>
                            <td>{{item.tags || "Null"}}</td>
                            <td>{{item.thumbnail || "Null"}}</td>
                            <td>{{item.url || "Null"}}</td>
                            <td>{{item.visible || "Null"}}</td>
                            <td>
                                <router-link :to="'/admin_index/product_details/' + item.pid">修改</router-link>
                                <router-view></router-view>

                                删除
                            </td>
                        </tr>
                        </template>
                    </table>
            </div>
            <div class="page">
                <template>
                    <Page :total="50" show-elevator @on-change="change"></Page>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
    import {getProductList} from '../../http/API/index'
    import {get_product_list} from '../../http/API/index'

    export default {
        name: "admin_product",
        data(){
            return{
                tag: "",
                visible: '7',
                products:'',
                n: 10,//翻页每页显示数据
                cid: 'dfy',
                orderby : '',
                listt2 : '',
                page : '',
                product: ''
            }
        },
        methods:{
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleSelectAll (status) {
                this.$refs.selection.selectAll(status);
            },
            change: function (page) {
                this.page = page;
                console.log(this.page)
                this.get_product_lists()
            },
            //得到数据
            get_product_lists(){
                get_product_list(this.cid,this.page,this.n,this.orderby).then((res) => {
                    if (res.code === 20000) {
                            this.product = res.data;
                        console.log(this.products)
                    } else if(res.data = []) {
                        console.log("没有数据了");
                    }
                })
            }
        },
        created: function () {
            //ajax获取后台数据，这里就不做了获取的数据存储在  this.rongliang。
            this.get_product_lists();
        },
    }
</script>

<style scoped>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
    .left{
        float: left;
        width: 15.5%;
    }
    .right{
        float: right;
        width: 83%;
    }
    .right_top{
        margin-top: 10px;
    }
    .right_banner{
        margin-top: 20px;
    }
    .right table{
        width: 100%;
        border-collapse:collapse;
    }
    .right_banner table tr:hover{
        background: #d4d4d4;
    }
    .right table td,.right table th{
        width: 7%;
        height: 50px;
        text-align: center;
    }


</style>